<template>
  <div class="w-[90%]">
    <div class="draw-container">
      <!-- 头部 -->
      <div class="py-2 flex justify-between items-center px-2 draw-header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ name: 'proj.list' }">{{ section?.proj.shortName }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ section?.name }}</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- <div class="flex gap-2 items-center">
          <button class="draw-info-btn" @click="router.push({ name: 'image', params: { sectionId } })">作业制图</button>
          <button class="draw-info-btn" @click="router.push({ name: 'drawInfo', params: { sectionId } })">
            绘图信息
          </button>
        </div> -->

        <div>
          <el-button-group>
            <!-- 铁塔 -->
            <el-button type="primary" size="small" @click="drawer = true">
              <eiffel-tower theme="outline" size="15" class="text-gray-200" />
            </el-button>
            <!-- 塔间 -->
            <el-button type="primary" size="small" @click="showBetInfo = true">
              <Reel theme="outline" size="15" class="text-gray-200" />
            </el-button>
            <!-- 控制点 -->
            <el-button type="primary" size="small" @click="showAcrossInfo = true">
              <LocalTwo theme="outline" size="15" class="text-gray-200" />
            </el-button>
            <!-- 设置 -->
            <el-button type="primary" size="small" @click="showSettingInfo = true">
              <SettingTwo theme="outline" size="15" class="text-gray-200" />
            </el-button>
            <!-- 方向 -->
            <el-button type="primary" size="small" @click="showOrderInfo = true">
              <GuideBoard theme="outline" size="15" class="text-gray-200" />
            </el-button>
          </el-button-group>
        </div>
        <!-- button group -->
        <div class="relative group">
          <el-button-group>
            <el-button type="primary" size="small" @click="readXlsxFile(sectionId)">
              <Plus theme="outline" size="15" class="text-gray-200" />
            </el-button>
            <el-button type="primary" size="small" @click="">
              <Back theme="outline" size="15" class="text-gray-200" />
            </el-button>
          </el-button-group>
          <!-- 数据导入 -->
          <!-- <div
            class="absolute w-40 h-32 bg-gray-100 rounded-md shadow-md top-[25px] -left-4 z-20 py-4 hidden group-hover:block duration-500">
            <div class="flex flex-col justify-center items-center">
              <div class="bg-gray-300 rounded-full mb-2 cursor-pointer">
                <Plus theme="outline" size="60" class="text-gray-700" />
              </div>
              <div>
                <el-button type="primary" size="default" @click="">下载模板</el-button>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 内容 -->
      <div class="draw-main">
        <RouterView />
      </div>

      <!-- 左侧抽屉 -->
      <el-drawer v-model="drawer" title="铁塔信息">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="User" name="first">User</el-tab-pane>
          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </el-tabs>
      </el-drawer>

      <!-- 底部-->
      <div class="draw-footer">
        <!-- 计算按钮 -->
        <el-button type="primary" size="default" @click="caclS">刷新</el-button>
      </div>
    </div>
  </div>

  <DialogTowerInfo :visiable="showTowerInfo" :sectionId="sectionId" @closed="closeDrawInfo" />
  <DialogBetInfo :visiable="showBetInfo" :sectionId="sectionId" @closed="closeDrawInfo" />
  <DialogAcrossInfo :visiable="showAcrossInfo" :sectionId="sectionId" @closed="closeDrawInfo" />
  <DialogSettingInfo :visiable="showSettingInfo" :sectionId="sectionId" @closed="closeDrawInfo" />
  <DialogOrderInfo :visiable="showOrderInfo" :sectionId="sectionId" @closed="closeDrawInfo" />
</template>

<script setup lang="ts">
import { Back, Plus, EiffelTower, Reel, LocalTwo, GuideBoard, SettingTwo } from '@icon-park/vue-next'

import useSection from '@/composables/useSection'
import { RouterView, useRoute } from 'vue-router'
import { ref } from 'vue'
import DialogTowerInfo from '@/components/Dialog/DialogTowerInfo.vue'
import DialogBetInfo from '@/components/Dialog/DialogBetInfo.vue'
import DialogAcrossInfo from '@/components/Dialog/DialogAcrossInfo.vue'
import DialogSettingInfo from '@/components/Dialog/DialogSettingInfo.vue'
import DialogOrderInfo from '@/components/Dialog/DialogOrderInfo.vue'
import { TabsPaneContext } from 'element-plus'

const route = useRoute()
const sectionId = ref(+route.params.sectionId)
const { find, read, cacl, section } = useSection()

const showTowerInfo = ref(false)
const showBetInfo = ref(false)
const showAcrossInfo = ref(false)
const showSettingInfo = ref(false)
const showOrderInfo = ref(false)

const drawer = ref(false)

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
// 计算
const caclS = async () => {
  await cacl({ sectionId: sectionId.value })
}

const closeDrawInfo = () => {
  showTowerInfo.value = false
  showBetInfo.value = false
  showAcrossInfo.value = false
  showSettingInfo.value = false
  showOrderInfo.value = false
}

/**
 * 区段excel并计算铁塔的坐标
 * @param sectionId 区段号
 */
async function readXlsxFile(sectionId: number) {
  await read(sectionId)
}

find(sectionId.value)
</script>

<style lang="scss" scoped>
.draw-container {
  @apply h-full;
  display: grid;
  grid-template:
    'header' 30px
    'main' 1fr
    'footer' 50px;
}
.draw-header {
  @apply bg-slate-400 box-border;
  grid-area: header;
}
.draw-main {
  @apply bg-slate-200 overflow-y-auto box-border;
  grid-area: main;
}
.draw-footer {
  @apply bg-slate-400 text-xs flex justify-center items-center;
  grid-area: footer;
}
.draw-info-btn {
  @apply text-gray-700 text-sm cursor-pointer border border-gray-600 px-2 rounded-sm focus:bg-blue-400 focus:border-white hover:bg-blue-500 hover:border-gray-300 duration-300 box-border;
}
</style>
